<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>申请卡</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap-4.0.0.css" rel="stylesheet">
    <style>
        .row .bg-emp{
            line-height: 56px;
        }
    </style>
</head>
<body>
<div th:insert="fragment/header :: top-header"></div>
<hr>
<div class="alert-danger text-center">
    <P class="card-text">申请内容</p>
</div>
<div class="container">
    <div class="row text-center"> </div>
    <hr>
    <div class="row">
        <div class=" col-md-4 card-body card">
            <h5 class="card-title alert-dark"><strong th:text="${card_info.card_name}"></strong></h5>
            <img class="card-img card-img-top" th:src="${card_info.card_img}" alt="Card image cap"> </div>
        <div class="col-md-4 card-body card">
            <h5 class="card-title alert-dark"><strong>注意事項</strong></h5>
            <p>此卡通过 WEB 提供基本服务，免年费。 请注意，如果您对产品不信服，我们可能会取消您的会员。 使用价格明细、服务指南、附带保险指南、咨询等</p>
        </div>
        <div class="col-md-4 card-body card">
            <h5 class="card-title alert-dark"><strong>您应该准备的</strong></h5>
            •您可能需要提交两份身份证明文件（日本签发的驾照或驾驶背景证明、护照、居留卡等）。
            *2020年2月4日（星期二）后申请的护照地址栏仅包含紧急联系人，不能作为身份证明文件处理。
            *如果您希望获得现金服务，您可能需要提交收入证明。 （例）预扣税单、纳税申报表、工资单等</div>
    </div>
    <hr>
    <div class="row card-header">以下信息将用于卡的注册</div>
    <div class="container">
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">电子邮件地址</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <label th:text="${user_info.user_account}">yamata.taro@h.co.jp</label>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
        <br>
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">地址</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <label th:text="${user_info.user_address}">1980-12-31</label>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
        <br>
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">电话</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <label th:text="${user_info.user_tel}">080-1234-5678</label>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
    </div>
    <hr>
    <div class="row card-header">关于您本人</div>
    <div class="container">
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">用户ID</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <label th:text="${user_info.user_id}">8888888888</label>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
        <br>
        <br>
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">姓名</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <P th:text="${user_info.user_name}">男性</P>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
        <br/>
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">性別</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <P th:text="${user_info.user_age}">男性</P>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
    </div>
    <hr>
    <div class="text-center">
        <p class="lead"> <button type="button" class="btn btn-danger" onclick="apply()">立即申请</button> </p>
    </div>
    <div class="row">
        <div class="text-center col-lg-6 offset-lg-3">
            <p>Copyright &copy; H &middot; All Rights Reserved &middot;</p>
        </div>
    </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>

<script th:inline="javascript">
    function apply(){
        $.ajax({
            url: '/completeCardBind',
            type: 'post',
            data: {
                user_id: [[${user_info.user_id}]],
                card_id: [[${card_info.card_id}]]
            },
            success: function (res) {
                if(res){
                    //跳转到主页
                    location.href = "/";
                }
            }
        });
    }
</script>
</body>
</html>
